<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>主页</title>
    <base th:href="${#request.getContextPath()}+'/'">
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <link rel="icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="/static/common/element/index.css"/>
</head>

<body>
<div id="home">
    <template>
        <el-container class="index-container">
            <el-header class="index-header">
                <span class="index-title" @click="toggleCollapse">{{homeName}}</span>
                <div class="index-login-user">
                    <span style="margin-right: 10px;">{{user.realname}}</span>
                    <el-dropdown trigger="click" @command="handleCommand" style="margin-right: 12px; cursor: pointer">
                        <el-avatar icon="el-icon-user-solid" size="medium" :src="avatar"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-user" command="userCenter">个人中心</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-switch-button" command="logout" divided>注销登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside :collapse="isCollapse" :width="isCollapse?'64px':'200px'" class="index-aside">
                    <el-menu unique-opened background-color="#545c64" text-color="#fff" active-text-color="#409EFF" :collapse="isCollapse" :collapse-transition="false" :router="false" :default-active="activePath">
                        <agile-menu-tree :menu-tree-list="menuTreeList" @openTableParent="addTab"></agile-menu-tree>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                            <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title" :name="item.name" :style="defaultHeight">
                                <iframe :src="item.content" style="height: 100%;width: 100%;border: none"></iframe>
                            </el-tab-pane>
                        </el-tabs>
                        <button @click="send">发消息</button>
                    </el-main>
                    <el-footer class="index-footer">
                        <el-link type="primary" icon="el-icon-hot-water" href="https://www.java.com/" :underline="false">Java</el-link>
                        <el-link type="primary" icon="el-icon-trophy" href="https://cn.vuejs.org/v2/api" :underline="false">Vue</el-link>
                        <el-link type="primary" icon="el-icon-eleme" href="https://element.eleme.io" :underline="false">Element</el-link>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>

        <el-dialog title="个人中心" width="35%" :visible.sync="userCenterDialog" :modal="false" :close-on-click-modal="false">
            <el-tabs v-model="userCenterModel" @tab-click="handleClick">
                <el-tab-pane label="基本资料" name="first">
                    <el-form :model="updateForm" ref="updateForm" :rules="rules" label-width="100px">
                        <el-form-item label="真实姓名" prop="realname">
                            <el-input v-model="updateForm.realname"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="identityNumber">
                            <el-input v-model="updateForm.identityNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="出生日期" prop="birthday">
                            <el-input v-model="updateForm.birthday" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="updateForm.sex" :disabled="true">
                                <el-radio-button v-for="item in sexItem" :label="item.value" :name="item.name">{{item.name}}</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="updateForm.age" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="updateForm.phone" maxlength="11" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱" prop="email">
                            <el-input v-model="updateForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="头像" prop="avatar">
                            <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                                       :on-success="handleAvatarSuccess.bind(this,'head')"
                                       :before-upload="beforeAvatarUpload">
                                <el-avatar v-if="updateForm.avatar" :src="updateForm.avatar" class="avatar"></el-avatar>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip">上传头像图片大小不能超过2MB!</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-circle-close" @click="userCenterDialog = false">取 消</el-button>
                            <el-button icon="el-icon-circle-check" type="primary" @click="updateUser">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <el-form :model="passwordForm" ref="passwordForm" :rules="rules" label-width="100px">
                        <el-form-item label="旧密码" prop="oldPassword">
                            <el-input v-model="passwordForm.oldPassword" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="newPassword">
                            <el-input v-model="passwordForm.newPassword" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input v-model="passwordForm.confirmPassword" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-circle-close" @click="userCenterDialog = false">取 消</el-button>
                            <el-button icon="el-icon-circle-check" type="primary" @click="updatePassword">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </template>
</div>
</body>
<script type="text/javascript" src="/static/common/vue/vue.min.js"></script>
<script type="text/javascript" src="/static/common/element/index.js"></script>
<script type="text/javascript" src="/static/common/util/axios.min.js"></script>
<script type="text/javascript" src="/static/common/api.js"></script>
<script type="text/javascript" src="/static/common/module/home.js"></script>
<style>
    .index-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .index-header {
        background-color: #403f3e;
        color: #409EFF;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: content-box;
        padding: 0px;
    }

    .index-aside {
        background-color: #545c64;
    }

    .index-footer {
        background-color: #f0f2f5;
        color: #333;
        text-align: center;
        line-height: 50px;
    }

    .index-title {
        color: #fff;
        font-size: 25px;
        display: inline;
        margin-left: 70px;
    }

    .index-login-user {
        font-size: 14px;
        display: flex;
        align-items: center
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

</html>
